<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>学习强国新闻站</title>
	<link rel="stylesheet" href="boot/css/bootstrap.min.css">
	<style type="text/css">
		
		h4{font-size:40px;text-align: center}			
		.nav {			
			height: 80px;
			margin-top: 2px;
			background:rgb(204,204,204) url(logo.png) no-repeat left center;
			background-size: auto 100% ;
			padding-left: 350px; 

		}	
		
		ul li{display: inline-block;line-height: 80px;margin: 0 10px}
		a{font-size:30px;font-weight: bold;text-decoration: none;color: black}

		.phone{
			height: 80px;line-height: 80px;float: right;
			padding-right:30px; 
			display: none;
		}

		.photo1{
			height: 400px;
			padding-top: 60px;
			background: url('images/promo-bg.jpg') no-repeat;
			background-size: cover;
			color: white;
		}
		.photo1 h1{
			font-weight: 100;
    		font-size: 72px;
		}
		.photo1 h3{
			color: hsla(0,0%,100%,.7);
			font-size: 24px;
		}

	
		body {
			text-align: center;
		}
		.photo {
			display: inline-block;		
			width: 24%;height: 300px;
			margin: 2px;
			background:rgb(204,204,204);
		}
	
		.title h1{		
			font-size:40px;		
			font-weight: bold;
			color:black;
		}
		.photos {
			margin:auto;
		
		}
.footer{height: 30px;text-align: center;line-height: 30px;font-size: 20px;font-weight: bold;}
		.a11{font-size: 80px;color: #0ba1e4}
	
	</style>
	<!--[if IE]>
		<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>

	<div class="nav">
	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">学习新思想</a></li>
		<li><a href="#">红色中国</a></li>
		<li><a href="#">学习科学</a></li>
		<li><a href="#">环球视野</a></li>
		<li><a href="#">联系我们</a></li>
	</ul>	
	<div class="phone"><img src="nav.png"></div>
</div>



	<div class="photo1">	 
			<h1>让五四精神在新时代放射新的光芒</h1> 
			<h3>青年兴则国家兴，青年强则国家强</h3> 	
	</div>

		<div class="photos">
			<div class="photo">			
				<div class="title">
				<h1><span class="glyphicon glyphicon-time a11" ></span></h1>
				<br>
				<h1>要用绿水青山定调发展的底色</h1>
				
				</div>
			</div>
			<div class="photo">				
				<div class="title">
					<h1><span class="glyphicon glyphicon-screenshot a11" ></span></h1>
					<br>
					<h1>一带一路建设走向高质量发展</h1>
				
				</div>
			</div>
			<div class="photo">				
				<div class="title">
					<h1><span class="glyphicon glyphicon-refresh a11" ></span></h1>
					<br>
					<h1>奋斗在脱贫攻坚一线的女汉子</h1>
				</div>
			</div>
			<div class="photo">				
				<div class="title">
					<h1><span class="glyphicon glyphicon-thumbs-up a11" ></span></h1>
					<br>
					<h1>携手大道同行 共创美好未来</h1>
				</div>
			</div>
	
		</div>
<div class="footer">@版权所有 前端工程师项目组</div>

</body>
</html>